<template>
  <div class="box">
    <div class="box-item flex-1">
      <div class="title">设备巡检</div>
      <div class="content border-right">
        <template v-if="list1.length">
          <div class="list-item" v-for="(item, index) in list1" :key="index">
            <a-tooltip placement="top" :title="item.total">
              <div class="item-num" :style="{color: item.status == 1 ? '#2681f3' : '#f44745'}">{{item.total}}</div>
            </a-tooltip>
            <div class="list-dec">{{item.name}}</div>
          </div>
        </template>
        <a-empty v-else :image="simpleImage" />
      </div>
    </div>
    <div class="box-item flex-1">
      <div class="title margin-left-10">安防巡检</div>
      <div class="content">
        <template v-if="list2.length">
          <div class="list-item" v-for="(item, index) in list2" :key="index">
            <a-tooltip placement="top" :title="item.total">
              <div class="item-num" :style="{color: item.status == 1 ? '#2681f3' : '#f44745'}">{{item.total}}</div>
            </a-tooltip>
            <div class="list-dec">{{item.name}}</div>
          </div>
        </template>
        <a-empty v-else :image="simpleImage" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  reactive,
  toRefs,
} from "vue";
import { Empty } from "ant-design-vue";
import request from "../../../common/utils/request";
export default defineComponent({
  name: "FacilityInspection",
  components: {
  },
  setup(props, context) {

    const state = reactive({
      spinning: false,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      list1: [],
      list2: [],
    })


    const getData = (type) => {
      request
        .get("/org", "/workbench/patrol_census", {application: type})
        .then((res) => {
          if (type === 'EQUIPMENT_INSPECTION') {
            state.list1 = res?.list || []
          } else {
            state.list2 = res?.list || []
          }
        });
    };

    // 设备巡检
    getData('EQUIPMENT_INSPECTION');
    //安防巡检
    getData('SECURITY_INSPECTION');

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.box {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 12px;
}
.box-item {
  display: flex;
  flex-direction: column;
}
.title {
  padding-bottom: 10px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}
.content {
  flex: 1;
  padding: 16px 8px;
  display: flex;
  .list-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 0;

    .item-num {
      font-size: 24px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }
  }
}
.border-right {
  border-right: 1px solid #e9e9e9;
}
.margin-left-10 {
  margin-left: 10px;
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
:deep(.ant-empty-normal) {
  margin: 0;
}
:deep(.ant-empty) {
  width: 100%;
}
</style>